<template>
	<view class="container">
		<uni-nav-bar status-bar="true" title="国家普惠社区"></uni-nav-bar>
		
		<view class="logo">
			<view>
				<image style="width: 132rpx;height: 132rpx;" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png" mode=""></image>
			</view>
		</view>
		
		<view class="form">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="input" v-model="ruleForm.phone" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column code">
					<input class="uni-input" name="code" v-model="ruleForm.smsCode" maxlength="6" placeholder="请输入验证码" />
					
					<view class="time" @tap="send">{{ code }}</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">下一步</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {register, sendCode, queryagreeinfo, signAcctAgreement, openAcct} from '@/api/register.js'
	
	export default {
		data() {
			return {
				code: '获取验证码',
				t: 60,
				ruleForm: {
					phone: '',
					smsCode: ''
				}
			}
		},
		methods: {
			formSubmit (e) {
				const _this = this;
				
				if (_this.ruleForm.phone === '') {
					uni.showToast({
						icon: "none",
						title: "手机号码不能为空"
					});
					return false;
				} else {
					if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_this.ruleForm.phone)) {
						uni.showToast({
							icon: "none",
							title: "请输入正确的手机号码"
						});
						return false;
					} else {
						if (this.ruleForm.smsCode === '') {
							uni.showToast({
								icon: "none",
								title: "请输入验证码"
							});
							return false;
						} else {
							if (_this.ruleForm.smsCode.length !== 6) {
								uni.showToast({
									icon: "none",
									title: "验证码格式错误"
								});
								return false;
							} else {
								uni.showLoading({
									mask: true
								})
								register(_this.ruleForm).then(res => {
									if (res.status === 200) {
										_this.query()
									} else {
										uni.showToast({
											icon: "none",
											title: res.msg
										});
									}
								})
							}
						}
					}
				}
			},
			
			// 查询是否开户成功
			info () {
				uni.showLoading({
					mask: true
				})
				openAcct('').then(res => {
					if (res.status === 200) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						uni.navigateTo({
							url: '/pages/register/bank/bank'
						})
					}
				})
			},
			
			// 查询是否签订了h5协议
			query () {
				queryagreeinfo('').then(res => {
					if (res.status === 200) {
						if (res.data.length === 0) {
							signAcctAgreement('').then(res => {
								if (res.status === 200) {
									window.location.href= res.data.url;
								} else {
									if (res.status === 400) {
										this.info()
									}
								}
							})
						} else {
							this.info()
						}
					}
				})
			},
			
			// 发送验证码
			send () {
				const _this = this;
				if (_this.ruleForm.phone === '') {
					uni.showToast({
						icon: "none",
						title: "手机号码不能为空"
					});
					return false;
				} else {
					if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_this.ruleForm.phone)) {
						uni.showToast({
							icon: "none",
							title: "请输入正确的手机号码"
						});
						return false;
					} else {
						if (_this.t === 60 && _this.code === '获取验证码') {
							_this.code = _this.t + 's';
							sendCode({
								phone: _this.ruleForm.phone,
							}).then(res => {
								if (res.status === 200) {
									uni.showToast({
										title: res.msg,
										icon: 'success'
									})
								}
							})
							const times = setInterval(() => {
								_this.t--;
								if (_this.t !== 0) {
									_this.code = _this.t + 's';
								} else {
									_this.t = 60;
									_this.code = '获取验证码'
									clearInterval(times)
								}
							}, 1000)
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.logo {
		padding-top: 90rpx;
		
		view {
			margin: 0 auto;
			width: 132rpx;
			height: 132rpx;
			padding: 16rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 30rpx;
		
			image {
				border-radius: 32rpx;
			}
		}
	}
	
	.form {
		width: 600rpx;
		max-width: 95%;
		margin-top: 300rpx;
		
		.uni-form-item {
			border: 1px solid #EEEEEE;
			box-sizing: border-box;
			margin-bottom: 50rpx;
			padding: 18rpx 20rpx;
			border-radius: 5px;
			font-size: 15rpx;
			position: relative;
			
			&.code {
				padding-right: 160rpx;
				.time {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 25rpx;
				}
			}
		}
		
		uni-button {
			background-color: #42b983;
			color: #ffffff;
			margin-top: 70rpx;
		}
	}
}
</style>
